'use strict';

/* ===== Enable Bootstrap Popover (on element  ====== */

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})

/* ==== Enable Bootstrap Alert ====== */
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
    new bootstrap.Alert(alert)
});


/* ===== Responsive Sidepanel ====== */
const sidePanelToggler = document.getElementById('sidepanel-toggler');
const sidePanel = document.getElementById('app-sidepanel');
const sidePanelDrop = document.getElementById('sidepanel-drop');
const sidePanelClose = document.getElementById('sidepanel-close');

window.addEventListener('load', function () {
    responsiveSidePanel();
});

window.addEventListener('resize', function () {
    responsiveSidePanel();
});

function responsiveSidePanel() {
    let w = window.innerWidth;
    if (w >= 1200) {
        // if larger
        //console.log('larger');
        sidePanel.classList.remove('sidepanel-hidden');
        sidePanel.classList.add('sidepanel-visible');

    } else {
        // if smaller
        //console.log('smaller');
        sidePanel.classList.remove('sidepanel-visible');
        sidePanel.classList.add('sidepanel-hidden');
    }
};

sidePanelToggler.addEventListener('click', () => {
    if (sidePanel.classList.contains('sidepanel-visible')) {
        console.log('visible');
        sidePanel.classList.remove('sidepanel-visible');
        sidePanel.classList.add('sidepanel-hidden');

    } else {
        console.log('hidden');
        sidePanel.classList.remove('sidepanel-hidden');
        sidePanel.classList.add('sidepanel-visible');
    }
});


sidePanelClose.addEventListener('click', (e) => {
    e.preventDefault();
    sidePanelToggler.click();
});

sidePanelDrop.addEventListener('click', (e) => {
    sidePanelToggler.click();
});


/* ====== Mobile search ======= */
const searchMobileTrigger = document.querySelector('.search-mobile-trigger');
const searchBox = document.querySelector('.app-search-box');

searchMobileTrigger.addEventListener('click', () => {

    searchBox.classList.toggle('is-visible');

    let searchMobileTriggerIcon = document.querySelector('.search-mobile-trigger-icon');

    if (searchMobileTriggerIcon.classList.contains('fa-search')) {
        searchMobileTriggerIcon.classList.remove('fa-search');
        searchMobileTriggerIcon.classList.add('fa-times');
    } else {
        searchMobileTriggerIcon.classList.remove('fa-times');
        searchMobileTriggerIcon.classList.add('fa-search');
    }
});

var list = document.getElementById('list')
var per = 12
var size = 0
var pages = 1
var pager = document.getElementById('pager')

window.addEventListener('load', () => {
    if (list === null) return
    size = list.childElementCount
    pages = Math.ceil(size / per) | 0
    pager.innerHTML = ''
    pager.append(createElement(' disabled', '上一页'))
    pager.append(createElement(' active', 1))
    for (var i = 1; i < pages; ++i) pager.append(createElement('', i + 1))
    pager.append(createElement((pages !== 1 ? '' : ' disabled'), '下一页'))
    changePage(1)
});

function createElement(state, value) {
    var item = document.createElement('li')
    item.className = 'page-item' + state
    var a = document.createElement('a')
    a.className = 'page-link'
    a.innerText = value
    a.onclick = () => changePage(value)
    a.style.cursor = 'pointer'
    item.append(a)
    return item
}

function changePage(cur) {
    if (!isNaN(parseInt(cur))) {
        cur = parseInt(cur)
    } else if (cur === '上一页') {
        cur = getCurrentPage() - 1
    } else if (cur === '下一页') {
        cur = getCurrentPage() + 1
    }
    cur = Math.max(1, Math.min(cur, pages))
    for (var i = 1; i < pager.childElementCount - 1; ++i) pager.children[i].className = 'page-item'
    pager.children[cur].className = 'page-item active'
    pager.firstChild.className = 'page-item' + (cur !== 1 ? '' : ' disabled')
    pager.lastChild.className = 'page-item' + (cur !== pages ? '' : ' disabled')

    for (var i = 0; i < size; ++i) list.children[i].style.display = 'none'
    for (var i = (cur - 1) * per; i < size && i < cur * per; ++i) {
        list.children[i].style.display = ''
    }
}

function getCurrentPage() {
    for (var p = 1; p < pager.childElementCount - 1; ++p) {
        if (pager.children[p].className.includes('active')) {
            return p
        }
    }
    return 0
}